<template>
  <div style="margin-left: 15px">
    <p class="shenqing">数据总汇
      <el-button
        size="mini"
        type="primary"
        icon="el-icon-download"
        style="margin-left: 20px"
        @click="handleExport">导出</el-button>
    </p>

    <el-table  v-loading="loading" :data="roleList" stripe style="margin-left: 15px;width: 95%"
               border>
      <el-table-column align="center" type="index" label="序号"  width="55"  />
      <el-table-column align="center" label="物料编码"   width="150"   property="mno" :show-overflow-tooltip="true"  ></el-table-column>
      <el-table-column align="center" label="物料名称" property="mname" :show-overflow-tooltip="true" ></el-table-column>
      <el-table-column align="center" label="物料规格"  property="mmodel" ></el-table-column>
      <el-table-column align="center" label="单位" property="unit" :show-overflow-tooltip="true"  ></el-table-column>
      <el-table-column align="center" label="计划价" property="planPrice" :show-overflow-tooltip="true"  ></el-table-column>
      <el-table-column align="center" label="技术参数" property="technicalParameters" :show-overflow-tooltip="true"  ></el-table-column>
      <el-table-column align="center" label="需求量" property="demandNum" :show-overflow-tooltip="true"  ></el-table-column>
      <el-table-column align="center" label="用途" property="useing" :show-overflow-tooltip="true"  >  </el-table-column>
      <el-table-column align="center" label="备注" property="note" :show-overflow-tooltip="true"  ></el-table-column>
      <el-table-column align="center" label="未入库数量" property="storageNum" :show-overflow-tooltip="true"  ></el-table-column>
      <el-table-column align="center" label="是否完成入库" property="isStorage" :show-overflow-tooltip="true"  >
        <template slot-scope="scope">
          <span v-show="scope.row.isStorage=='0'">未完成</span>
          <span v-show="scope.row.isStorage=='1'">完成</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="利库数量" property="loseNum" :show-overflow-tooltip="true"  ></el-table-column>
    </el-table>
  </div>
</template>

<script>
  import {exportUser} from "@/api/material/theOtherHZ";
  import request from '@/utils/request'
  export default {
    name: "Role",
    data() {
      return {
        //计划信息
        loading:false,
        roleList:[],
      };
    },
    created() {
      console.log('接收-采购申请详情',this.$route.query.data)

      this.search()
    },
    methods: {
      //查询
      search: function () {
        this.loading = true
        request({
          url: '/system/info/listByLiKuCount',
          method: 'get',
          params: this.$route.query.data
        }).then(response => {
          this.loading = false
          this.roleList = response.rows
          this.total = response.total
        });
      },
      handleExport: function () {
        for(var i=0;i<this.roleList.length;i++){
          if(this.roleList[i].isStorage==0){
            this.roleList[i].isStorage='未完成'
          }
          if(this.roleList[i].isStorage==1){
            this.roleList[i].isStorage='完成'
          }

        }
        let sourceOriginAmount = this.roleList; // 需要导出的数据，可以动态获取
        this.loading = true; // 设置一个loading，生成Excel需要时间
        import('@/vendor/Export2Excel.js').then(excel => { // 导入js模块
          const tHeader = ['序号', '物料编码', '物料名称','物料规格', '单位', '计划价', '技术参数',  '需求量', '用途', '备注', '未入库数量', '是否完成入库', '利库数量']; // 导出excel 的标题
          const filterVal = ['index', 'mno', 'mname','mmodel','unit','planPrice','technicalParameters','demandNum','useing','note','storageNum','isStorage','loseNum']; // 每个标题对应的字段

          const list = (sourceOriginAmount || []).map((item, key) => { // 通过 map 方法遍历，组装数据成上面的格式
            return {
              index: key + 1,
              mno: item.mno,
              mname: item.mname,
              mmodel: item.mmodel,
              unit: item.unit,
              planPrice: item.planPrice,
              technicalParameters: item.technicalParameters,
              demandNum: item.demandNum,
              useing: item.useing,
              note: item.note,
              storageNum: item.storageNum,
              isStorage: item.isStorage,
              loseNum: item.loseNum,
            };
          });

          if (list) {
            const data = this.formatJson(filterVal, list); // 生成json数据
            excel.export_json_to_excel({ // 调用excel方法生成表格
              header: tHeader,
              data,
              filename: this.goodsName
            });
          } else {
            alert('暂无无数据');
          }
          this.loading = false;
        })
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]));
      },


    }
  };
</script>
<style>
  .shenqing{
    color: #05A380;
    font-weight: 700;
    margin-left: 15px;

  }
  .tablestyle {
    margin-left: 15px;
    border: 1px solid #cccccc;
    color: #606266;
    font-size: inherit;
  }
  .fujian {

    color: #787be8;
    margin-top: 15px;
  }
  .fujian span{
    margin-left: 15px;
    cursor: pointer;
  }
</style>
